<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title>YUI3 Accordion widget - example pages</title>

        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.0.0/build/cssfonts/fonts-min.css">
        <link rel="stylesheet" type="text/css" href="assets/skins/sam/accordion.css">

        <style type="text/css">
            html, body {
                height:100%;
                background-color: #F2FBFF;
            }
            
            h1 {
                font-size: 170%;
                font-weight:bold;
                line-height: 130%;
                margin:0 0 0 0px;
                padding: 1em 0.5em 1em;
            }

            h2 {
                font-size:150%;
                font-weight:bold;
                margin:1.5em 0 0;
                top:0;
            }

            h3 {
                font-size:130%;
                font-weight:bold;
                margin:1.5em 0 0;
                top:0;
            }

            h4 {
                font-size:110%;
                font-weight:bold;
                margin:0.6em 0 0;
                top:0;
            }
            
            li {
                list-style-type:disc;
                margin:0 0 0 30px;
                padding:0;
                line-height: 1.4em;
            }

            p {
                line-height: 1.6em;
            }

            .main {
                position: relative;
                margin: auto;
                padding: 1em 1em 2em 1em;
                height: 100%;
                width: 500px;
            }

            .acc_container {
                top: 50px;
                position: relative; 
                width: 450px;
                height: 600px;
            }
        </style>
        
        <script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
        <script type="text/javascript" src="http://yui.yahooapis.com/gallery-2009.11.09-19/build/gallery-accordion/gallery-accordion-min.js"></script>
        
        <script type="text/javascript"> 

        YUI().use( 'gallery-accordion', function(Y) {
            var accordion;
            
            accordion = new Y.Accordion( {
                boundingBox: "#bb1",
                contentBox: "#acc1",
                useAnimation: true,
                collapseOthersOnExpand: false
            });

            accordion.render();
        });
        </script>
    </head>
    <body class="yui-skin-sam">
        <div class="main">

            <div id="acc_container" class="acc_container">
                <div id="bb1" class="yui-accordion">
                    <div id="acc1">
                        <div id="item1" class="yui-accordion-item" data-alwaysvisible="true">
                            <div class="yui-widget-hd">
                                <a class="yui-accordion-item-icon"></a>
                                <a class="yui-accordion-item-label">What is Accordion widget?</a>
                                <div class="yui-accordion-item-icons">

                                    <a class="yui-accordion-item-iconalwaysvisible"></a>
                                    <a class="yui-accordion-item-iconexpanded"></a>
                                    <a class="yui-accordion-item-iconclose yui-accordion-item-iconclose-hidden"></a>
                                </div>
                            </div>
                            <div class="yui-widget-bd">
                                <div id="pm1" style="position: relative;">
                                    <h1>Accordion widget, ver. 1.06</h1>

                                    <p>
                                        Accordion is a visual widget that allows the expansion/collapse of grouped items containing arbitrary data. Accordion items can be added or removed dynamically, reordered via drag-and-drop, closed and set as always visible.<br/>
                                        The height of the content inside each item can be set in three different ways:<br/>
                                    </p>
                                    <ul>
                                        <li>auto - the browser will calculate content height</li>
                                        <li>fixed - content height will be exactly X pixels</li>

                                        <li>stretch - content height will be calculated, based on the height of the other items in the Accordion</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <div id="item2" class="yui-accordion-item" data-expanded="true" yuiConfig='{"contentHeight": {"method": "stretch"}, "label": "Can I see some examples?"}'>
                            <div class="yui-widget-hd">
                                <a class="yui-accordion-item-icon"></a>

                                <a class="yui-accordion-item-label"></a>
                                <div class="yui-accordion-item-icons">
                                    <a class="yui-accordion-item-iconalwaysvisible"></a>
                                    <a class="yui-accordion-item-iconexpanded"></a>
                                    <a class="yui-accordion-item-iconclose yui-accordion-item-iconclose-hidden"></a>
                                </div>
                            </div>
                            <div id="bodyid2" class="yui-widget-bd">
                                <div id="pm2" style="position:relative; overflow: auto; height: 100%;">

                                    <h3>
                                        Examples:
                                    </h3>
                                    <ul>
                                        <li>
                                            <h4>
                                                <a href="build_from_markup.html">Build Accordion widget from markup</a>
                                            </h4>
                                        </li>

                                        <li>
                                            <h4>
                                                <a href="build_from_script.html">Build Accordion widget from script</a>
                                            </h4>
                                        </li>
                                        <li>
                                            <h4>
                                                <a href="add_remove_items.html">Dynamically add or remove items</a>

                                            </h4>
                                        </li>
                                        <li>
                                            <h4>
                                                <a href="overwrite_properties.html">Overwrite the default properties</a>
                                            </h4>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div>

                         <div id="item3" class="yui-accordion-item yui-accordion-item-expanded yui-accordion-item-contentheight-fixed-70">
                            <div class="yui-widget-hd">
                                <a class="yui-accordion-item-icon"></a>
                                <a class="yui-accordion-item-label">Where are the sources?</a>
                                <div class="yui-accordion-item-icons">

                                    <a class="yui-accordion-item-iconalwaysvisible"></a>
                                    <a class="yui-accordion-item-iconexpanded"></a>
                                    <a class="yui-accordion-item-iconclose yui-accordion-item-iconclose-hidden"></a>
                                </div>
                            </div>
                            <div id="bodyid3" class="yui-widget-bd">
                                <div id="pm3">
                                    <ul>
                                        <li>

                                            <h4>
                                                <a href="http://github.com/ipeychev/yui3-gallery/tree/master/src/gallery-accordion" target="_blank">Source code<br/></a>
                                            </h4>
                                        </li>
                                        <li>
                                            <h4>
                                                <a href="apidocs/index.html" target="_blank">API Documentation<br/></a>
                                            </h4>

                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div>

                        <div id="item4" class="yui-accordion-item" data-contentheight="stretch">
                            <div class="yui-widget-hd">
                                <a class="yui-accordion-item-icon"></a>

                                <a class="yui-accordion-item-label">Changelog</a>
                                <div class="yui-accordion-item-icons">
                                    <a class="yui-accordion-item-iconalwaysvisible"></a>
                                    <a class="yui-accordion-item-iconexpanded"></a>
                                    <a class="yui-accordion-item-iconclose yui-accordion-item-iconclose-hidden"></a>
                                </div>
                            </div>
                            <div id="bodyid3" class="yui-widget-bd">

                                <div id="pm3" style="position:relative; overflow:auto; height:100%;">
                                    <p>
                                        06.11.2009 - ver. 1.06<br/>
                                        Accordion supports setting config attributes via HTML5 "data-". These are:
                                    </p>
                                    <ul>
                                      <li>data-label - string<br/>
                                      <li>data-expanded - "true", "yes" or "1"<br/>

                                      <li>data-alwaysvisible - "true", "yes" or "1"<br/>
                                      <li>data-closable - "true", "yes" or "1"<br/>
                                      <li>data-contentheight - "auto", "stretch" or "fixed-X", where X is a number<br/><br/>
                                    </ul>
                                    <p>
                                        02.11.2009 - ver 1.05:<br/>
                                        - Setting item label bugfix <br/>

                                    </p>
                                    <p>
                                        12.10.2009 - ver 1.04:<br/>
                                        - AccordionItem - header rewritten<br/>
                                    </p>
                                    <p>
                                        06.10.2009 - ver 1.03:<br/>

                                        - Local constants created instead string literals<br/>
                                        - Event listeners unbundled<br/>
                                        - Removed unnecessary underscores.
                                    </p>
                                    <p>
                                        30.09.2009:<br/>
                                         - Switched to YUI3 GA
                                    </p>

                                    <p>
                                        29.09.2009:<br/>
                                        - Added new example - Overwrite the default properties
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
</body>
</html>
